<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>调试面板</title>
    <script src="./public/js/flexible.js"></script>
    <link rel="stylesheet" href="./public/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/css/index.css">
    <script src="./public/js/utilsx.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
</head>

<body>
    <div class="body-box">
        <div style="position: fixed;top: 0px;left: 20px;color:blue;font-size: 12px;"><u><a href="javascript:history.back()">返回</a></u></div>
        <div class="tool-bar">
            <div class="select-data">
                <div class="form-group">
                    <label for="disabledSelect">选择串口</label>
                    <select id="disabledSelect" class="form-control com">
                    </select>
                </div>
                <div class="form-group">
                    <label for="BaudRate">波特率</label>
                    <input type="text" class="form-control" id="BaudRate" value="9600">
                </div>
            </div>
            <div class="submit-data">
                <button class="btn btn-primary btn-block btn-submit">确定</button>
            </div>
        </div>
        <div class="content-box">
            <div class="receive-box">
                <div class="send-header">
                    <label>接受信息</label>
                </div>
                <div class="receive-windows">
                </div>
            </div>
            <div class="send-box">
                <div class="send-header">
                    <label>发送信息</label>
                </div>
                <div class="send-windows">
                    <textarea class="input-send-data">0203002E00010000</textarea>
                </div>
                <div class="send-btn">
                    <div class="btn-box">
                        <div class="btn btn-warning btn-send">发送信息</div>&nbsp&nbsp&nbsp
                        <div class="btn btn-danger btn-reset">清空信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

let Datastore = require('nedb');
console.log(Datastore)



window.$ = window.jQuery = require('./public/js/jquery.min.js');
let serialport = require('serialport');
let port = null;

serialport.list((err, ports) => {
    for (let item of ports) {
        $('.com').append(`<option>${item.comName}</option>`)
    }
    // console.log(ports);
});

$('.btn-submit').click((data) => {
    let COM = $('select option:selected').text();
    let BaudRate = $('#BaudRate').val();
    console.log(COM);
    console.log(BaudRate);
    port = new serialport(COM, {
        baudRate: parseInt(BaudRate),

    });
    $('.receive-windows').text(`打开串口: ${COM}, 波特率: ${BaudRate}`);
    $('.receive-windows').append('<br/>=======================================<br/>');

    port.on("open", function(err) {
        if (err) {
            console.log(err + "打开串口出错，请重试");
        } else {
            console.log('串口已经打开');
        }
    });

    port.on('error', function(err) {
        console.log('Error: ', err.message);
    })

    // 接收信息
    port.on('data', function(info) {
        console.log(info)//[2, 3, 2, 136, 144, 154, 40]
        var receiveData = utilsx.arrayToHex(info);
        console.log(`DATA: ${receiveData}`);
        $('.receive-windows').append(receiveData+"</br>");

    });

});
// 点击发送信息
$('.btn-send').click(() => {
    var sendData = $('.input-send-data').val();
    if (port != {} && port != null) {
        utilsx.sendData(port, sendData, function(err, results) {
            if (err) {
                console.log('err ' + err.message);
            } else {
                console.log('发送数据: ' + sendData.toLocaleUpperCase());
                console.log('发送数据字节长度： ' + sendData.length); //发出去的数据字节长度
            }
        })
    }
})
// 清空信息
$('.btn-reset').click(() => {
    $('.input-send-data').val('');
    $('.receive-windows').val('');
})

</script>

</html>
